<template>
    <div class="heightAll widthAll home" id="ding3" style="overflow-x: hidden">
        <top tar="ding3"></top>
        <div style="margin:10px">
            <el-button @click="add" circle icon="el-icon-plus" size="mini" style="display: inline"
                       type="success"></el-button>
            <span style="color: #85C161; margin-left: 10px;">添加分类</span>
        </div>
        <el-table :data="getCategories" class="el-table"
                  header-align="center" stripe style="width: 100%; text-align: center; margin-left: 10px;">
            <el-table-column label="编号" prop="id" width="200">
            </el-table-column>
            <el-table-column label="分类名称" prop="name" width="250">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!--scope.row保存该行数据-->
                    <el-button @click="edit(scope.row)" size="mini" type="primary">修改</el-button>
                    <el-button @click="deleteById(scope.row)" size="mini" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <!--分页组件-->
        <el-pagination :page-size="page.pageSize"
                       :page-sizes="[5,10,15]"
                       :total="getCategoriesCount"
                       @current-change="change"
                       @size-change="handleSizeChange"
                       background
                       class="my-changePage"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <el-dialog :title="isMod? '修改分类':'增加分类'" :visible.sync="dialogFormVisible"
                   style="font-family: 'Microsoft YaHei UI',sans-serif"
                   width="40%">
            <el-form :model="category" :rules="rule" ref="category">
                <el-form-item label="编号" label-width="100" v-if="isMod">
                    <el-input disabled v-model="category.id"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" label-width="200" prop="name">
                    <el-input autocomplete="off" v-model="category.name">
                        <template slot="append"><i class="el-icon-s-help"></i></template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="resetForm">取 消</el-button>
                <el-button @click="action('category')" type="primary">确认</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import categoryInfo from "../../store/categoryInfo";
import common from "../../store/common";
import top from '@/components/backToTop.vue'

export default {
    name: "categoryList",
    data() {
        return {
            page: {
                pageSize: 5,
                pageNo: 1
            },
            dialogFormVisible: false,
            isMod: false,
            category: JSON.parse(JSON.stringify(categoryInfo.getters.getCategoryInfo)),
            rule: categoryInfo.getters.getRules,
            preCategory: JSON.parse(JSON.stringify(categoryInfo.getters.getCategoryInfo))
        }
    },
    methods: {
        change(currentPage) {
            this.page.pageNo = currentPage;
            this.queryCategories();
        },
        handleSizeChange(size) {
            this.page.pageSize = size;
            this.queryCategories();
        },
        edit(row) {
            this.isMod = true;
            this.openDialog();
            this.category = JSON.parse(JSON.stringify(row));
            this.preCategory = JSON.parse(JSON.stringify(row));
        },
        deleteById(row) {
            common.ifDeleteConfirm(this).then(resp => {
                if (resp) {
                    categoryInfo.dispatch('deleteCategoryById', row.id).then(resp => {
                        common.afterUpdateActions(this, resp, '删除', null, false);
                    });
                }
            });
        }, queryCategories() {
            categoryInfo.dispatch('queryCategoriesByLimit', this.page);
        },
        openDialog() {
            if (this.$refs['category'])
                this.$refs['category'].resetFields();
            this.dialogFormVisible = true;
            this.category = JSON.parse(JSON.stringify(categoryInfo.getters.getCategoryInfo));
        },
        add() {
            this.isMod = false;
            this.openDialog();
        },
        resetForm() {
            this.dialogFormVisible = false;
        },
        action(formName) {
            const _this = this;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (!_this.isMod || _this.category.name !== _this.preCategory.name) {
                        categoryInfo.dispatch('checkCategoryExist', _this.category).then((rs) => {
                            if (rs) {
                                _this.$message.warning('分类已存在');
                            } else {
                                _this.submit();
                            }
                        });
                    } else _this.submit();
                }
            });
        },
        submit() {
            const _this = this;
            if (_this.isMod) {
                categoryInfo.dispatch('updateCategory', this.category).then((rs) => {
                    _this.dialogFormVisible = false;
                    common.afterUpdateActions(_this, rs, '修改', null, false);
                });
            } else {
                categoryInfo.dispatch('addCategory', this.category).then((rs) => {
                    _this.dialogFormVisible = false;
                    common.afterUpdateActions(_this, rs, '添加', null, false);
                });
            }
        }
    }, mounted() {
        this.queryCategories();
    }, computed: {
        getCategoriesCount: function () {
            return categoryInfo.getters.getTotal;
        }, getCategories: function () {
            return categoryInfo.getters.getCategories;
        }
    }, components: {
        top
    }
}
</script>

<style scoped>
</style>